<template>
  <div class="app-container customer-div">
    <!--数据列表-->
    <div class="table-container">
      <el-radio-group v-model="type" style="margin-bottom:20px;" size="small" @change="changeType">
        <el-radio-button label="line">按产品线</el-radio-button>
        <el-radio-button label="customer">按客户</el-radio-button>
        <el-radio-button label="docking">转售客户</el-radio-button>
        <el-radio-button label="sub">子客户</el-radio-button>
      </el-radio-group>

      <!--按客户-->
      <allCustomerListPL ref="allCustomerListPL" v-if="type == 'customer' || type == 'docking' || type == 'sub'"></allCustomerListPL>
      <!--按产品线-->
      <allLineListPL ref="allLineListPL" v-if="type == 'line'"></allLineListPL>

    </div>



  </div>
</template>
<script>
import store from '@/store'
import { mapGetters } from 'vuex'
import {getUserOption, inputDriverInfo} from "../../api/partner";

import allCustomerListPL from './components/allCustomerListPL'
import allLineListPL from './components/allLineListPL'

export default {
  name: "allCustomersPL",
  data(){
    return {
      roles:store.getters.roles ? store.getters.roles : [],

      tab:'all',
      type:'line',

    }
  },
  computed: {
    ...mapGetters([
      'name',
      'mobile',
      'userId'
    ]),
    departmentPL(){
      if(this.roles.indexOf("departmentPL") != -1){
        return true
      }else{
        return false
      }
    },
  },
  components : {
    allCustomerListPL,
    allLineListPL
  },

  // beforeRouteEnter(to, form, next) {
  //   next(vm => {
  //     console.log("22222222222222")
  //     vm.$refs.allLineListPL.init(vm.tab);
  //   });
  // },

  mounted() {
    console.log("22222222222222")
    // this.$refs.allCustomerListPL.init(this.tab);
    this.$nextTick(() => {
      // dom元素更新后执行，因此这里能正确打印更改之后的值
      setTimeout(()=>{
        this.$refs.allLineListPL.init(this.tab);
      },300)
    })
  },

  filters: {


  },
  methods:{

    //切换类型
    changeType(){
      if(this.type == 'customer' || this.type == 'docking' || this.type == 'sub'){
        this.$nextTick(() => {
          // dom元素更新后执行，因此这里能正确打印更改之后的值
          this.$refs.allCustomerListPL.init(this.tab);
        })
      }else {
        this.$nextTick(() => {
          // dom元素更新后执行，因此这里能正确打印更改之后的值
          this.$refs.allLineListPL.init(this.tab);
        })
      }
    },

  },
}
</script>

<style  lang="scss">

.mergeCell .vxe-cell{padding:0;}
.mergeDiv{
  padding-left:10px;
  padding-right:10px;
  border-bottom:1px solid #e8eaec;
  min-height: 36px;
}

.mergeDiv:last-child{
  border-bottom: 0;
}
</style>
